<template>
	<view>
		<view class="search">
			<view class="left-input">
				<image class="search-img" :src="searchImg"></image>
				<input type="text" placeholder="请输入" v-model="inputText" />
				<image @click="clearText" v-if="inputText != ''" class="clear-img" :src="clearImg"></image>
			</view>
			<view class="right-btn" @click="searchClick">
				<text>搜索</text>
			</view>
		</view>
		<view class="search-zw"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchImg: require('@/components/common/my-search-item/img/search.svg'),
				clearImg: require('@/components/common/my-search-item/img/clear.svg'),
				inputText: ''
			}
		},
		methods: {
			clearText() {
				this.inputText = ''
			},
			searchClick() {
				if (this.inputText == '') {
					return uni.$showMsg('请输入要搜索的内容');
				}
				this.$emit('searchClick', this.inputText)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		width: 100%;
		height: 100rpx;
		background-color: #F2F2F2;
		position: relative;
		position: fixed;
		z-index: 9;

		.left-input {
			width: 70%;
			background: #fff;
			height: 70rpx;
			position: absolute;
			left: 5%;
			top: 15rpx;
			border-radius: 40rpx 0 0 40rpx;
			display: flex;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-top: 15rpx;
				margin-left: 12rpx;
				margin-right: 12rpx;
			}

			input {
				width: 80%;
				height: 60rpx;
				margin-top: 5rpx;
				font-size: 28rpx;
				// color: #dbdbdb;
			}
		}

		.right-btn {
			position: absolute;
			width: 20%;
			left: 75%;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			top: 15rpx;
			border-radius: 0 40rpx 40rpx 0;
			//background-image: linear-gradient(to right, #F19634 0%, #EC6936 100%);
			background-color: rgba(67, 207, 124, 1);

			text {
				color: #fff;
				font-size: 28rpx;
			}

			&:active {
				background-color: #dbdbdb;
			}
		}
	}
	
	.search-zw{
		height: 100rpx;
	}
</style>
